<template>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="茶友号" prop="id">
        <el-input readonly v-model="ruleForm.id"></el-input>
    </el-form-item>
    <el-form-item label="茶友账号" prop="username">
        <el-input readonly v-model="ruleForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="userpwd">
        <el-input type="password" v-model="ruleForm.userpwd" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
    </el-form-item>
        <el-form-item label="输入日期">
        <div class="block" style="float:left;">
            <el-date-picker
            required
            v-model="ruleForm.birthday"
            type="date"
            placeholder="选择日期">
            </el-date-picker>
        </div>
    </el-form-item>
    <el-form-item label="茶友信息" prop="info">
        <el-input required type="text" v-model="ruleForm.info" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
        <el-button @click="returnForm">返回列表</el-button>
    </el-form-item>
</el-form>
</template>
<script>
import {searchTeafriend,updateTeafriend} from '@/api'
  export default {
    created() {
        let id = this.$route.query.id
        //console.log(id)
        let _this = this
        searchTeafriend(id).then((res) => {
            _this.ruleForm = res.data
            _this.ruleForm.userpwd = ''
        })
    },
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.userpwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          id: 0,
          username:'',
          userpwd: '',
          checkPass: '',
          score:0,
          birthday: '',
          info: '',
        },
        rules: {
          pass: [
            { required: true,validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { required: true,validator: validatePass2, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
          let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            updateTeafriend(_this.ruleForm).then((res) => {
                if(res){
                    _this.$alert('用户： ' + _this.ruleForm.username+'修改成功！', '修改数据', {
                        confirmButtonText: '确定',
                        callback: action => {
                            //跳转
                            _this.$router.push('/teafriendlist')
                        }
                    });
                }
            })
          } else {
            this.$message.error('请补充信息！');
            return false;
          }
        });
      },
      returnForm() {
        this.$router.push('/teafriendlist')
      }
    }
  }
</script>